<template>
  <a-modal
    title="成员编辑\新增"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item label="成员">
          <a-select
            show-search
            :filter-option="filterOption"
            v-decorator="['userId',{ rules: [{ required: true, message: '请选择团队成员' }] }]"
            placeholder="请选择团队成员">
            <a-select-option
              v-for="i in staffs"
              :key="i.userId"
              :values="i.userId">
              {{ i.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="项目职责">
          <a-input v-decorator="['projectDuty']" />
        </a-form-item>
        <a-form-item label="备注">
          <a-input v-decorator="['note']" />
        </a-form-item>
        <a-form-item label="teamId" v-show="false">
          <a-input v-decorator="['teamId']" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { allStaff } from '@/api/manage'

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      staffs: []
    }
  },
  created () {
    // 查询所有的员工allStaff
    allStaff().then(res => {
      if (res.code === 0) {
        this.staffs = res.data
      }
    })
  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>
